<template>
  <div>
    <!-- 必须有这个h1 -->
    <h1 id="inActiveTime" style="display: none" />
    <div class="project-form">
      <el-form :model="ruleForm" :label-position="labelPosition" ref="ruleForm" :inline="true" label-width="70px">
        <el-form-item label="手机号" prop="searchKeyWord">
          <el-input v-model="ruleForm.searchKeyWord"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">查单</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <!-- <el-button @click="writeLocalPhone()">设置</el-button>
          <el-button @click="readLocalPhone()">读取</el-button> -->
        </el-form-item>
      </el-form>

      <el-card class="box-card" v-for="(res, index) in result" :key="res.id" :body-style="{ padding: '10px' }">
        <div slot="header">
          <span style="font-weight: bold">方案名称:&nbsp;&nbsp;</span>{{ title }}
          <span style="font-weight: bold">状态:&nbsp;&nbsp;</span>{{ statusDesc }}
          <span style="font-weight: bold">序号 :&nbsp;&nbsp;</span> {{ index + 1 }}
        </div>

        <table>
          <tr v-for="field in fixedFields" :key="field.id">
            <td style="width: 40%; font-weight: bold">{{ field.textLabel }}:</td>
            <td>{{ field.type === 'RADIO' ? res[field.formItemId + 'label'] : res[field.formItemId] }}</td>
          </tr>
        </table>
        <!-- 
        <div v-for="field in fixedFields" :key="field.id">
          {{ field.textLabel }}:
          {{ field.type === 'RADIO' ? res[field.formItemId + 'label'] : res[field.formItemId] }}
        </div> -->

        <el-button style="float: right; padding: 3px 0" type="text" @click="deleteData(res.id)">删除</el-button>
      </el-card>

      <!-- <el-card class="box-card" v-if="showDataCard">
        <div slot="header" class="clearfix">
          <span>报单列表</span>
        </div>
        <div v-for="(res, index) in result" :key="res.id" class="text item">
          <el-divider><i class="el-icon-mobile-phone"></i>{{ index + 1 }}</el-divider>
          <div v-for="field in fixedFields" :key="field.id">
            {{ field.textLabel }}:
            {{ field.type === 'RADIO' ? res[field.formItemId + 'label'] : res[field.formItemId] }}
          </div>
          <el-button style="float: right; padding: 3px 0" type="text" @click="deleteData(res.id)">删除</el-button>
        </div>
      </el-card> -->
    </div>
  </div>
</template>

<script>
import 'tduck-form-generator/dist/TduckForm.css'
import { detailFormRequest } from '@/api/project/form'
import { publicQueryFormResultRequest, deleteFormDataByIdRequest } from '@/api/project/data'
export default {
  name: 'queryView',
  props: {},
  data() {
    return {
      labelPosition: 'left',
      fixedFields: [],
      formKey: '',
      ruleForm: {},
      result: [],
      showDataCard: false,
      title: '',
      statusDesc: ''
    }
  },
  created() {
    // form id
    this.formKey = this.$route.query.key || this.$route.params.key
    this.ruleForm.formKey = this.$route.query.key || this.$route.params.key
  },
  async mounted() {
    await detailFormRequest(this.formKey).then((res) => {
      this.fixedFields = res.data.formItems
      this.title = res.data.form.textName
      this.statusDesc = res.data.form.statusDesc
      document.title = this.title + '查单'

      var createTime = {}
      createTime['formItemId'] = 'createTime'
      createTime['textLabel'] = '提交日期'
      this.fixedFields.push(createTime)
      console.log(this.fixedFields)
      this.ruleForm.formItemId = res.data.formItems.filter((item) => item.textLabel === '手机号')[0]['formItemId']
    })
  },
  methods: {
    submitForm() {
      publicQueryFormResultRequest(this.ruleForm).then((res) => {
        this.result = res.data
        if (res.data.length > 0) {
          this.$message({
            type: 'success',
            message: '查询成功',
            duration: 1000
          })
          this.showDataCard = true
        } else {
          this.$message({
            type: 'error',
            message: '暂无数据',
            duration: 1000
          })
          this.showDataCard = false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    deleteData(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteFormDataByIdRequest(this.formKey, id).then((res) => {
            this.$message({
              type: 'success',
              message: res.msg,
              duration: 1000
            })
            this.submitForm()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration: 1000
          })
        })
    },
    readLocalPhone() {
      this.ruleForm.searchKeyWord = localStorage.getItem('phone')
    },
    writeLocalPhone() {
      localStorage.setItem('phone', this.ruleForm.searchKeyWord)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>